<template>
	<view class="px-12">
		<y-tabs :list='tabList' v-model="type" @change="change"></y-tabs>
		<z-paging ref="paging" v-model="list" @query="getList" use-page-scroll :auto="false">
			<view class="p-10">
				<view class="grid-columns-2 gap-10 " v-if="type==1">
					<y-item-video v-for="(item,index) in list" :key='item.id' @success="paging.reload()" :type="2"
						:detail="item"></y-item-video>
				</view>
				<y-item-voice :list="list" @more="more" v-else />
			</view>

			
			<template #empty>
				<view class="w-p-100 flex flex-center flex-column">
					<image src="/static/image/empty.png" class="empty"></image>
					<view class="w-p-100 flex flex-center ">
						<view class="flex flex-column gap-8 flex-y-center w-p-100">
							<text class="fs-18 text-333 fw-bold">暂无{{type==1?'形象':'音色'}}</text>
							<text class="fs-12 text-999">立即去创建一个吧</text>
							<view class="btn-blue mt-10 w-p-70" @click="to">创建{{type==1?'形象':'音色'}}</view>
						</view>
					</view>
				</view>
			</template>
			
		</z-paging>

		<y-more ref="morePopup" :type='3' :id="id" @success="paging.reload()"></y-more>

		<y-popup ref="loginPopup" mode='bottom' round='12px'>
			<view class="pb-10">
				<y-login @close="loginPopup.close()"></y-login>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { onMounted, reactive, ref } from 'vue';
	import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { getSceneList } from '@/api/scene.js'
	import { getVoiceList } from '@/api/voice.js'
	import { useStorage } from '@/utils/storeage.js'
	import { useRefs, useUserStore } from '@/stores'
import { $page } from "@/utils";
	const { hasLogin, getUserInfo } = useUserStore()
	const { get, remove } = useStorage()
	const paging = ref(null)
	const list = ref([])
	const loginPopup = ref()
	const id = ref(0)
	const morePopup = ref()
	useZPaging(paging)
	onShow(() => {
		const t = get('TYPE')
		if (t) {
			type.value = t
			remove('TYPE')
		}

		if (paging.value && hasLogin()) {
			paging.value.reload()
		}
	})

	onMounted(() => {
		if (hasLogin()) {
			paging.value.reload()
			getUserInfo()
		} else {
			loginPopup?.value.open()
		}
	})
	const tabList = reactive([
		{ label: '我的形象', value: 1 },
		{ label: '我的声音', value: 2 },
	])
	const type = ref(1)

	const getList = (page, limit) => {
		if (type.value == 1) {
			getSceneList({ page: page, limit: limit }).then(res => {
				paging.value.complete(res.data)
			})
		}
		if (type.value == 2) {
			getVoiceList({ page: page, limit: limit }).then(res => {
				paging.value.complete(res.data)
			})
		}
		
	}

	const change = () => {
		paging.value.reload()
	}
	const more = (e) => {
		id.value = e.id;
		morePopup.value.open();
	}


	const to = () => {
		let url="/pages/created/scene/index"
		if (type.value == 2) {
          url = "/pages/created/voice/index"
		}
		
		$page.open(url)
	}
</script>

<style>

</style>